<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/libs/bootstrap/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/libs/bootstrap-table/css/bootstrap-table.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/libs/treegrid/jquery.treegrid.css}"/>
    <link rel="stylesheet" th:href="@{/static/libs/Ionicons/css/ionicons.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/libs/markdown/simplemde.min.css}">
    <link rel="stylesheet" th:href="@{/static/libs/markdown/github-markdown.min.css}">
    <link rel="stylesheet" th:href="@{/static/libs/markdown/highlight.min.css}">
    <link rel="stylesheet" th:href="@{/static/libs/iCheck/minimal/blue.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/admin-common.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/examination.css}"/>
    <script th:src="@{/static/libs/jquery/jquery.min.js}"></script>
    <script th:src="@{/static/libs/bootstrap/bootstrap.min.js}"></script>
    <script th:src="@{/static/libs/bootstrap/bootstrap-datetimepicker.min.js}"></script>
    <script th:src="@{/static/libs/bootstrap/bootstrap-datetimepicker.zh-CN.js}"></script>
    <script th:src="@{/static/libs/pace/pace.js}"></script>
    <script th:src="@{/static/libs/jquery/jquery.slimscroll.min.js}"></script>
    <script th:src="@{/static/libs/jquery/fastclick.min.js}"></script>
    <script th:src="@{/static/libs/validate/validate.js}"></script>
    <script th:src="@{/static/libs/layer/layer.js}"></script>
    <script th:src="@{/static/libs/bootstrap-table/js/bootstrap-table.min.js}"></script>
    <script th:src="@{/static/libs/bootstrap-table/js/bootstrap-table-zh-CN.min.js}"></script>
    <script th:src="@{/static/libs/treegrid/jquery.treegrid.min.js}"></script>
    <script th:src="@{/static/libs/treegrid/jquery.treegrid.extension.js}"></script>
    <script th:src="@{/static/libs/treegrid/tree.table.js}"></script>
    <script th:src="@{/static/libs/upload/js/webuploader.js}"></script>
    <script th:src="@{/static/libs/upload/js/jax.uploader.js}"></script>
    <script th:src="@{/static/libs/upload/js/uploadCall.js}"></script>
    <script th:src="@{/static/libs/zplayer/js/zplayer.min.js}"></script>
    <script th:src="@{/static/libs/markdown/highlight.min.js}"></script>
    <script th:src="@{/static/libs/markdown/simplemde.min.js}"></script>
    <script th:src="@{/static/libs/iCheck/icheck.min.js}"></script>
    <script th:src="@{/static/js/inline-attachment.js}"></script>
    <script th:src="@{/static/js/codemirror.inline-attachment.js}"></script>
    <script th:src="@{/static/js/core.js}"></script>
    <script th:src="@{/static/js/FileSaver.js}"></script>
    <script th:src="@{/static/js/jquery.wordexport.js}"></script>

    <link rel="stylesheet" href="../../../static/css/vendor/ion-fonts.css">
    <link rel="stylesheet" href="../../../static/css/style.css">
    <link rel="stylesheet" href="../../../static/test/ziy/common.css">
    <link rel="stylesheet" href="../../../static/test/ziy/iconfont.css">

</head>
<meta charset="utf-8">
<!-- Main content -->
<body>
<div class="main-wrapper">

    <header class="header-main_area">
        <div class="header-top_area">
            <div class="container">
                <div class="row" style="height: 45px;">
                    <div class="col-lg-4">
                        <div class="ht-left_area in-header return" style="height: 44.67px;">
                            <a class="return" style="top: 5px;" href="../testpaper.html">
                                <span style="background:#fed100;color:#333333;">
                                        <i class="iconfont iconfanhui" style="color: black;"></i>
                                        <strong th:text="${session.course.name}">课堂名称</strong>
                                    </span>
                            </a>
                        </div>
                    </div>

                    <div class="col-lg-8">
                        <div class="ht-right_area">
                            <div class="ht-menu">
                                <ul>
                                    <li><a href="#"></a></li>
                                    <li><a href=""></a></li>
                                    <li><a href="/user/personal"><i class="ion-person"></i>个人中心</a></li>
                                    <li><a href="/doLogout"><i class="ion-log-out"></i>退出用户</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

</div>
<div class="in-header" style="box-shadow:0px 1px 3px 0px rgba(0, 0, 0, 0.04);background: none repeat scroll 0% 0% #fff;">

    <div class="nav gWidth row" id="third-nav" style="box-shadow: none">

        <div class="col-lg-12">
            <a href="../exams" class="active">考试列表</a>
            <!--/*@thymesVar id="id" type="com.hoyue.classroom.bean.Course"*/-->
            <a href="../questions">题目列表</a>


        </div>

    </div>
</div>

<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
            <div class="form-group" style="padding:10px">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="keywords">试卷名称:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="keywords">
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="grade">年级:</label>
                    <div class="col-xs-8">
                        <select class="form-control" id="grade">
                            <option  value="">请选择</option>
                            <option th:each="grade:${grades}" th:value="${grade}" th:text="${grade}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group" style="padding:10px">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="classId">考试班级:</label>
                    <div class="col-xs-8">
                        <select class="form-control" id="classId">
                            <option  value="">请选择</option>
                            <option th:each="class:${classes}" th:value="${class.id}" th:text="${class.className}"></option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="course">考试课程:</label>
                    <div class="col-xs-8">
                        <select class="form-control" id="courseId">
                            <option  value="">请选择</option>
                            <option th:each="course:${courses}" th:value="${course.id}" th:text="${course.name}"></option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4">状态:</label>
                    <div class="col-xs-8">
                        <select id="status" class="form-control">
                            <option value="">请选择</option>
                            <option value="0">未开始</option>
                            <option value="1">进行中</option>
                            <option value="2">已结束</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group" style="padding:10px">
                <div class="col-md-12">
                    <label class="control-label col-xs-4"></label>
                    <div class="col-xs-8">
                        <button type="button" id="btn_query" class="btn btn-primary pull-right">查 询</button>
                        <button type="button" id="btn_requery" class="btn btn-primary pull-right mr5">重 填</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-primary">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>发布考试
            </button>
            <button id="btn_batch_delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
            </button>
        </div>
        <table id="table"></table>
    </div>
</section>

<script>
    var columns = [
        {checkbox: true },
        {
            field: 'title',
            title: '考试标题',
            align : "center"
        },{
            field: 'course',
            title: '考试课程',
            align : "center",
            formatter: function (value) {
                return value.name;
            }
        },{
            field: 'totalScore',
            title: '分值',
            align : "center",
        },{
            field: 'author',
            title: '出题人',
            align : "center",
        },{
            field: 'status',
            title: '考试状态',
            align : "center",
            formatter : function(status) {
                var statusName = '';
                if(status == 0){
                    statusName = '<span class="label label-warning">未开始</span>';
                }else if(status == 1){
                    statusName = '<span class="label label-success">进行中</span>';
                }else if(status == 2){
                    statusName = '<span class="label label-danger">已结束</span>';
                }
                return statusName;
            }
        },{
            field: 'startTime',
            title: '开始时间',
            align : "center",
        },{
            field: 'endTime',
            title: '结束时间',
            align : "center",
        },{
            field : 'operation',
            title : '操作',
            align : "center",
            class:'min-width-100',
            formatter : function(value,
                                 row, index) {
                var edit = '<a class="btn btn-primary btn-sm" onclick="editExam('+row.id+')"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 编辑</a>';
                var del = '<a  class="btn btn-danger btn-sm" onclick="deleteExam('+row.id+')"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</a>';
                return edit +" "+ del;
            }
        }];
    var options={
        id:"#table",
        url: '/exam/list',
        columns:columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams : queryParams
    }
    Core.initTable(options);

    /*查询参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit : params.limit, //页面大小
            offset : params.offset, //页码
            keywords : $("#keywords").val(),
            grade : $("#grade").val(),
            classId : $("#classId").val(),
            courseId : $("#courseId").val(),
            status : $("#status").val(),
        };
        return temp;
    }

    /*编辑*/
    function editExam(id) {
        window.location.href="exam/edit?id="+id
    }
    /*删除*/
    function deleteExam(id) {
        Core.confirm("确定删除此次考试？",function () {
            Core.postAjax("/exam/delete",{"id":id},function (data) {
                if(data.status==200){
                    Core.refreshTable("#table");
                }
                layer.msg(data.msg);
            })
        })
    }
    $(function () {
        /*查询*/
        $("#btn_query").click(function(){
            Core.refreshTable("#table");
        });
        /* 重置表单 */
        $("#btn_requery").click(function(){
            $("#formSearch")[0].reset();
        });
        /* 发布考试 */
        $("#btn_add").click(function(){
            window.location.href="exam/add"
        });
        /*批量删除*/
        $("#btn_batch_delete").click(function(){
            var checkedRows= Core.selectMutiData("#table");
            if(checkedRows){
                Core.confirm("确定删除选中的"+checkedRows.length+"条记录？",function () {
                    var ids=[];
                    $.each(checkedRows, function (i, item) {
                        ids.push(item.id);
                    })
                    Core.postAjax("/exam/batch/delete", {"ids": ids}, function (data) {
                        if (data.status == 200) {
                            Core.refreshTable("#table");
                        }
                        layer.msg(data.msg);
                    })
                })
            }
        });
    });

</script>
</body>